<!-- Dom模板 -->
<template>
   <div class="all">
    <!-- Dom内容 -->
    <div class="header">
      <div class="name">CRM订单管理系统</div>
      <div class="people">
        <p>欢迎猫咪！</p>
        <img src="" alt="">
      </div>
    </div>
    <div class="main">
      <div class="left">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
              <el-menu-item-group v-for="(item, index) in data" :key="index">
                <el-menu-item v-if="!item.meta.isChild"
                  @click="liClick(index)"
                  :id="$route.meta.nowIndex === index ? 'active' : ''"
                  >{{ item.name }}</el-menu-item
                >
                <el-submenu v-if="item.meta.isChild" index='1'>
                  <template slot="title">
                    <span>{{item.name}}</span>
                  </template>
                  <el-menu-item-group v-for="(items, indexs) in item.children"
                      :key="indexs"
                      
                      class="juice"
                      >
                    <el-menu-item :id="$route.meta.index === indexs ? 'active1' : ''" :index='item.indexs' @click="liClickone(indexs)">{{items.name}}</el-menu-item>
                  </el-menu-item-group>
              </el-submenu>
              </el-menu-item-group>
            </el-menu>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
      
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: '',
  data() {
    return {
      msg: '测试',
      data:'',
      index: "",
      nowIndex: "",
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.data = this.$router.options.routes.filter(item=>item.meta.leftNav)[0].children
    console.log(this.data);
  },
  // Vue方法定义
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    liClick(index){
      console.log(index);
       this.data.forEach((items, indexs) => {
        if (index === indexs) {
          this.$router.push(items.path);
          // this.index = index; 
        }
      });
    },
    liClickone(index){
      let data = this.data.filter((itemss) => {
        return itemss.meta.isChild;
      })[0].children;
      data.forEach((items, indexs) => {
        if (index === indexs) {
          this.$router.push(items.path);
          // this.nowIndex = index;
        }
      });
    }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
.all{
  width:100%;
  height: 100vh;
  background-color: #eef1f5;
}
.all .header{
  width:95%;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 5px #999;
  position: fixed;
  top:0;
  left:2.5%;
  z-index: 1;
}
.header .name{
  padding-left: 15px;
}
.header .people{
  display: flex;
  padding-right: 15px;
}
.all .main{
  width:95%;
  height: calc(100vh - 50px);
  margin:0 auto;
  display: flex;
}
.main .left{
  width:120px;
  height: 100%;
  background-color: #fff;
  margin-top: 50px;
}
.main .right{
  width:calc(100% - 140px);
  padding-left: 20px;
  padding-top: 20px;
  height: 100%;
  margin-top: 50px;
}
.left >>> .el-submenu .el-menu-item{
  min-width:120px;
}
.left >>> .el-menu-item.is-active{
  color:#000;
}
#active1{
  color:#fff;
  background-color: #409EFF;
}
#active{
  color:#fff;
  background-color: #409EFF;
}

</style>